<template lang=pug>
    #productDetail
        .topBar
            .back(@click="back")
                svg.icon(aria-hidden="true")
                    use(xlink:href="#icon-back")
            .title(v-text="$store.state.currentProduct.ej_good_title")
            .share
                svg.icon(aria-hidden="true")
                    use(xlink:href="#icon-share")
        ul.slider-wrap
            li.item
                img.img(:src="$store.state.currentProduct.ej_good_picture_url")
        .detail
            .group.borderBottomOnePx
                .rent-price-static 租借价格
                .rent-price(v-text="$store.state.currentProduct.ej_good_rent_price")
            .group.borderBottomOnePx
                .original-price-static 购买原价
                .original-price(v-text="$store.state.currentProduct.ej_good_original_price")
            .group.borderBottomOnePx
                .purchasing-date-static 购买日期
                .purchasing-date(v-text="$store.state.currentProduct.ej_good_purchasing_date")
            .group.borderBottomOnePx
                .pickup-mode-static 取货方式
                .pickup-mode(v-text="$store.state.currentProduct.ej_good_pickup_mode_name")
            .group.borderBottomOnePx
                .rent-time-static 租借时间
                .rent-time(v-text="$store.state.currentProduct.ej_good_rent_time")
            .group.borderBottomOnePx
                .username 租借人
                .username(v-text="$store.state.currentProduct.ej_user_name")
            .group.borderBottomOnePx
                .contact-address-static 所在位置
                .contact-address(v-text="$store.state.currentProduct.ej_good_contact_address")
            .group.borderBottomOnePx
                .contact-phone-static 联系方式
                .contact-phone(v-text="$store.state.currentProduct.ej_good_contact_phone")
            .group.borderBottomOnePx(@click="showDealContent")
                .deal-content-static 协议内容
                svg.icon(aria-hidden="true")
                    use(xlink:href="#icon-more")
            .group.borderBottomOnePx(@click="showDesc")
                .desc-static 描述内容
                svg.icon(aria-hidden="true")
                    use(xlink:href="#icon-more")
        .order-btn-wrap
            button.order-btn(@click="order") 预约
        .white-space
</template>

<script type="es6">
  import {getProductById,orderProduct} from 'dataAPI/product'
    export default {
        name: 'productDetail',
        data () {
            return {
              id: -1
            }
        },
        mounted (){
            const idReg = /id=([\w]*)/
            const url = window.location.href
          console.log(idReg.exec(url))
            this.id = idReg.exec(url)[1]
            getProductById(this.id).then(response=>{
                this.$store.commit('updateCurrentProduct',response.data.data)
              console.log(response)
            })
        },
        methods:{
            back(){
                window.history.go(-1)
            },
            order(){
              orderProduct(this.id)
            },
            showDesc(){},
            showDealContent(){}
        },
        components: {}
    }
</script>

<style lang="stylus">
    @import "../../styles/common.styl"
    #productDetail
        width 100%
        overflow hidden
        .topBar
            display flex
            justify-content space-between
            background $mainColor
            color $assistantColor
            height 2rem
            line-height 2rem
            position fixed
            top 0
            width 100%
            .title
                font-size .9rem
            .back
                font-size 1.2rem
            .share
                font-size .95rem
            .share,.back
                width 2rem
                text-align center
        .slider-wrap
            margin 0
            padding 0
            list-style none
            width 100%
            margin-top 2rem
            .item
                width 100%
                height 7rem
                .img
                    height 100%
                    width 100%
        .detail
            width 100%
            font-size .625rem
            color $blackFont
            .group
                display flex
                justify-content space-between
                padding .5rem
                padding-left 0
                margin-left .5rem
        .deal-content-wrap
            padding .4rem
        .order-btn-wrap
            height 2.4rem
            margin-top .4rem
            width calc(100%-1rem)
            padding 0 .5rem
            .order-btn
                border-radius .2rem
                padding .5rem 0
                width 100%
                background $mainColor
                color $assistantColor
                border none
                outline none
                font-size .8rem
                float right
                text-align center

</style>
